<template>
    <div class="app-container">
        <el-link
            href="https://gitee.com/youlaiorg/vue3-element-admin/blob/master/src/views/demo/curd/index.vue"
            type="primary"
            target="_blank"
            class="mb-10"
        >
            示例源码 请点击>>>>
        </el-link>
        <!-- 搜索 -->
        <page-search
            ref="searchRef"
            :search-config="searchConfig"
            @query-click="handleQueryClick"
            @reset-click="handleResetClick"
        />
        <!-- 列表 -->
        <page-content
            ref="contentRef"
            :content-config="contentConfig"
            @add-click="handleAddClick"
            @edit-click="handleEditClick"
            @export-click="handleExportClick"
            @toolbar-click="handleToolbarClick"
            @operat-click="handleOperatClick"
        >
            <template #status="scope">
                <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
                    {{ scope.row[scope.prop] == 1 ? '启用' : '禁用' }}
                </el-tag>
            </template>
        </page-content>
        <!-- 新增 -->
        <page-modal
            ref="addModalRef"
            :modal-config="addModalConfig"
            @submit-click="handleSubmitClick"
        />
        <!-- 编辑 -->
        <page-modal
            ref="editModalRef"
            :modal-config="editModalConfig"
            @submit-click="handleSubmitClick"
        />
    </div>
</template>

<script setup lang="ts">
import searchConfig from './config/search'
import contentConfig from './config/content'
import addModalConfig from './config/add'
import editModalConfig from './config/edit'
// import usePage from '@/hooks/usePage'
import usePageSearch from '@/hooks/usePageSearch'
import usePageContent from '@/hooks/usePageContent'
import UserAPI from '@/api/user'
import type { IObject, IOperatData } from '@/hooks/usePage'
// const {
//     // handleAddClick,
//     // editModalRef,
//     // handleExportClick,
//     // handleSubmitClick,
// } = usePage()
const { handleQueryClick, handleResetClick } = usePageSearch()
const { handleAddClick, handleExportClick, handleSubmitClick } =
    usePageContent()
const { editModalRef } = usePageContent()
// store
// state
// action
// 编辑
async function handleEditClick(row: IObject) {
    // 根据id获取数据进行填充
    const data = await UserAPI.getFormData(row.id)
    editModalRef.value?.setModalVisible(data)
}
// 其他工具栏
function handleToolbarClick(name: string) {
    console.log(name)
    if (name === 'import') {
        ElMessage.success('点击了导入按钮')
    }
}
// 其他操作列
function handleOperatClick(data: IOperatData) {
    console.log(data)
    // 重置密码
    if (data.name === 'reset_pwd') {
        ElMessageBox.prompt(
            '请输入用户「' + data.row.username + '」的新密码',
            '重置密码',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }
        ).then(({ value }) => {
            if (!value) {
                ElMessage.warning('请输入新密码')
                return false
            }
            // 发送网络请求
            ElMessage.success('密码重置成功，新密码是：' + value)
        })
    }
}
// computed
</script>

<style scoped></style>
